import Qt 4.7

Item {
    id: container

    property variant scrollArea
    property variant orientation: Qt.Vertical

    opacity: 0

    function position() {
        var ny = 0;
        if (container.orientation == Qt.Vertical)
            ny = scrollArea.visibleArea.yPosition * container.height;
        else
            ny = scrollArea.visibleArea.xPosition * container.width;
 //       if (ny < 0) ny = 0;

        return ny;
    }

    function size() {
        var sy;

        if (container.orientation == Qt.Vertical)
            sy = scrollArea.visibleArea.heightRatio * container.height;
        else
            sy = scrollArea.visibleArea.widthRatio * container.width;

  //      if (sy < 0) sy = 0;

        return sy;
    }

	Rectangle {
		anchors.fill: parent
		color: "red"
		opacity: 0.5
	}

	Rectangle {
        color: "yellow"
		x: { container.orientation == Qt.Vertical ? 0 : parent.position() }
		y: { container.orientation == Qt.Vertical ? parent.position() : 0 }
		width: { container.orientation == Qt.Vertical ? parent.width : parent.size() }
		height: { container.orientation == Qt.Vertical ? parent.size() : parent.height }
    }

    states: State {
        name: "visible"
        when: container.orientation == Qt.Vertical ? scrollArea.movingVertically
                                                            : scrollArea.movingHorizontally
        PropertyChanges {
            target: container
            opacity: 1.0
        }
    }

    transitions: Transition {
            from: "visible"
            to: ""
            NumberAnimation { properties: "opacity"; duration: 200 }
    }
}
